<template>
    <div class="home main">
        <div class="topNumber">
            <div class="item" v-for="(item, index) in data.listNumber" :key="index">
                <h1>{{ item.title }}</h1>
                <span>
                    <count-to
                    :start-val="0"
                    :end-val="item.count"
                    :duration="2000"
                    />
                </span>
            </div>
        </div>
        <el-table
        v-if="data.recentLogList"
        stripe
        :data="data.recentLogList"
        style="width: 100%">

            <el-table-column
                prop="userLogId"
                label="ID">
            </el-table-column>
            
            <el-table-column
                prop="user.userName"
                label="名称">
            </el-table-column>
            
            <el-table-column
                label="权限">
                <template slot-scope="scope">
                    <el-tag
                    :type="roots[scope.row.user.root].tag"
                    disable-transitions>{{ roots[scope.row.user.root].title }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="logDescribe"
                label="描述">
            </el-table-column>

            <el-table-column
                label="创建时间">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    &nbsp;
                    <span>{{ dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="canvas">
            <div id="echarts-3"></div>
            <div id="echarts-4"></div>
            <div class="box">
                <div>
                    <div id="echarts-1">
                    
                    </div>
                    <div class="setting">
                        <el-date-picker
                        v-model="echarts1"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <div>
                    <div id="echarts-2">
                    
                    </div>
                    <div class="setting">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import { getIndexData, getLog } from '@/api/home'
import countTo from 'vue-count-to';
import dayjs from 'dayjs';
export default {
    name:"Home",
    components : {
        countTo
    },
    computed:{
        ...mapState(['routerList', 'roots'])
    },
    mounted(){
        this.getData()
    },
    data(){
        return {
            data : {},
            e1 : null,
            e2 : null,
            e3 : null,
            e4 : null,
            limit : 10,
            page : 0,
            echarts1 : ''
        }
    },
    created(){
    },
    methods : {
        dayjs,

        getData(){

            this.e1 = this.$echarts.init(document.getElementById('echarts-1'))
            this.e2 = this.$echarts.init(document.getElementById('echarts-2'))
            this.e3 = this.$echarts.init(document.getElementById('echarts-3'))
            this.e4 = this.$echarts.init(document.getElementById('echarts-4'))

            getIndexData().then(res => {
                if(res.code == 200){
                    this.data = res.data
                    this.onLoad()
                }
            })
        },

        loadUserLog(a, b, c){
            this.page++;
            getLog({
                page : this.page,
                limit : this.limit
            }).then(res => {
                if(res.code == 200){
                    this.data.recentLogList.push(...res.data)
                }
            })
        },

        onLoad(){
            this.e1.setOption(this.optionPie('昨日个人活跃度', '活跃度', this.data.activeUserList))

            this.e2.setOption(this.optionPie('近一个月个人活跃度', '活跃度', this.data.activeUserMonthList))
            
            this.e3.setOption(this.option('近一个月每日活跃度', this.data.activeMonth.date, 
            this.data.activeMonth.activeNumber,
            ['#0f0'], 'line'))
            
            this.e4.setOption(this.option('近一年每月活跃度', this.data.activeYear.date, 
            this.data.activeYear.activeNumber,
            ['#0f0'], 'line'))
        },

        option(title, names, vaule, color, type = 'bar'){
            return {
                color,
                title: {
                    text: title,
                    left: 'center'
                },
                tooltip: {},
                xAxis: {
                    data: names
                },
                yAxis: {},
                series: [{
                    type: type,
                    data: vaule
                }]
            }
        },
        optionPie(title, name, data){
            return {
                title: {
                    text: title,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: name,
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    }
}
</script>

<style lang="less" scoped>
.home{
    width: 100%;
    overflow-x: hidden;
    .topNumber{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .item{
            width: calc(~'100% / 4 - 60px');
            height: 200px;
            line-height: 80px;
            margin: 30px 30px;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-color: lightseagreen;
            color: #fff;
            line-height: 50px;
            justify-content: center;
            border-radius: 10px;
            span{
                font-size: 35px;
                color: #0f0;
            }
        }
    }
    .canvas{
        #echarts-1,
        #echarts-2,
        #echarts-3,
        #echarts-4
        {
            width: 100%;
            height: 500px;
        }
        .box{
            display: flex;
            width: 100%;
            &>div{
                width: 50%;
                .setting{
                    height: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding-bottom: 100px;
                }
            }
        }
    }
    & /deep/ .el-table{
        box-sizing: border-box;
        overflow-y: auto;
        padding: 30px;
        margin: 0 20px;
        &::-webkit-scrollbar {
            width: 10px;
            // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
        }

        &::-webkit-scrollbar-thumb {
            background: #ccc; // 滑块颜色
            border-radius: 5px; // 滑块圆角
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #f40; // 鼠标移入滑块变红
        }
    }
}
</style>